<template>
<div class="home-list-item">
  <div class="home-list-box" v-for="(infoItem, infoIndex) in infoList"
       @click="clickItem(infoItem)" v-if="!$route.meta.keepAlive">
    <div class="home-list-info">
      <div class="list-img">
        <el-image :src="ftpUrlImg + infoItem.user.coverPictureUrl"
                  loading="lazy"
                  style="width: 200px;height: 200px"
                  fit="cover"
                  class="lazy-img"/>
<!--        <img :src=" ftpUrlImg + infoItem.user.coverPictureUrl" />-->
      </div>
      <div class="list-item">
        <div class="item-title ">
          <h5>{{ infoItem.user.name }}</h5>
        </div>
        <div class="item-title">
          <span>年龄:{{infoItem.user.age == null ? "未知" : formatAge(infoItem.user.age) }}</span>
          <span class="item-gender">
<!--            <span v-if="infoItem.user.sex == 1" class="iconfont icon-xingbie-nan icon-male" style="color: #0052d4;font-size: 20px"></span>-->
<!--            <span v-if="infoItem.user.sex == 2" class="iconfont icon-xingbie-nv icon-male" style="color: #ef498b;font-size: 20px"></span>-->
            <el-icon v-if="infoItem.user.sex == 1" :size="20" color="#409EFC"><male /></el-icon>
            <el-icon v-if="infoItem.user.sex == 2" :size="20" color="#f55e90"><Female /></el-icon>
          </span>
        </div>
        <div class="item-title item-college">
          <span>学院:{{ infoItem.college }}</span>
        </div>
        <div class="item-title item-tag">
          <div class="item-tags">
            <!-- class="mx-1"  color="#bc4258"  :class="tagsIndex[labelIndex]"-->
            <el-tag
                v-for="(labelItem,labelIndex) in infoItem.labelDefaultLists"
                class="mx-1"
                color="#DE8E9C"
                effect="light"
                round
            >
<!--   v-show="this.labelItem.label == '' ? showTags : noShowTags"-->
              {{labelItem.label}}
            </el-tag>
<!--            <n-space-->
<!--            >&lt;!&ndash;v-for="labelList in infoList.labelDefaultLists"&ndash;&gt;-->
<!--              <n-tag v-for="(labelItem,labelIndex) in infoItem.labelDefaultLists"-->
<!--                     :color="	colorTag">-->
<!--                {{labelItem.label}}-->
<!--              </n-tag>-->
<!--            </n-space>-->
          </div>
        </div>
        <div class="item-title item-icon">
          <div @click.stop="clickLike(infoItem,infoIndex)">
            <svg class="icon icon-attention" aria-hidden="true" v-if="infoItem.isLike">
              <use xlink:href="#icon-cpxihuan"></use>
            </svg>
            <svg class="icon icon-attention" aria-hidden="true" v-if="!infoItem.isLike">
              <use xlink:href="#icon-cpxihuanxiantiao"></use>
            </svg>
            <span class="list-num">喜欢:{{ infoItem.likeNum }}</span>
          </div>
          <div @click.stop="clickAttention(infoItem,infoIndex)" >
            <el-button v-if="!infoItem.isAttention" type="default" size="small" round color="#DE7285" style="color: #fff">关注</el-button>
<!--            <el-button v-if="infoItem.isAttention" type="danger" size="small" round color="red" style="color: #fff">已关注</el-button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { formatAge } from "../../utils/utils";
import {ftpUrlImg} from "@/global/config";
import {useRouter} from "vue-router";
import {Plus, Star,Close} from '@element-plus/icons-vue'
import {getCurrentInstance, ref} from "vue";
export default {
  name: "InfoList",
    props:{
        infoList:null,
        isSearch:{
            default:false
        },
    },
  methods: {
    formatAge,
    clickItem(e){
      if(this.isComplete == 0){
        this.$message.warning("请先补充您的完整信息!")
        return
      }
      this.router.push({name:"PersonalDetails",params:{id:e.user.id,isSearch:this.isSearch}})
    },
    clickLike(e,i){
      // this.$loading();
      if(this.isComplete == 0){
        this.$message.warning("请先补充您的完整信息!")
        return
      }
      let type = 0;
      if (e.isLike){
        type = 1
        this.infoList[i].likeNum = this.infoList[i].likeNum - 1
      }else {
        this.infoList[i].likeNum = this.infoList[i].likeNum + 1
      }
      this.infoList[i].isLike = !this.infoList[i].isLike
      let params = {
        peerID:e.user.id,
        type:type
      }
      this.$requestCenter.addOrCancelLike(params).then((e)=>{
        console.log(e)
        if (e.code === 20061){
          if(this.infoList[i].isLike){
            this.$message.success("点赞成功！")
          }else {
            this.$message.warning("取消点赞！")
          }
        }else {
          this.$message.error("操作出错！")
          this.infoList[i].isLike = !this.infoList[i].isLike
          if (this.infoList[i].isLike){
            this.infoList[i].likeNum = this.infoList[i].likeNum + 1
          }else {
            this.infoList[i].likeNum = this.infoList[i].likeNum - 1
          }
        }
      })
      // this.$loading().close();
    },
    //点击关注按钮
    clickAttention(e,i){
      // this.$loading();
      if(this.isComplete == 0){
        this.$message.warning("请先补充您的完整信息!")
        return
      }
      let type = 0;
      if (e.isAttention){
        type = 1
      }
      let params = {
        peerID:e.user.id,
        type:type
      }
      this.infoList[i].isAttention = !this.infoList[i].isAttention
      this.$requestCenter.addOrCancelAttention(params).then((e)=>{
        console.log(e)
        if (e.code === 20061){
          if (this.infoList[i].isAttention){
            this.$message.success("成功关注！")
          }else {
            this.$message.warning("取关成功！")
          }
        }else {
          this.$message.error("操作出错！")
          this.infoList[i].isAttention = !this.infoList[i].isAttention

        }
      })
      // this.$loading().close();
    },
    // srcList(){
    //   this.srcList = ftpUrlImg + infoItem.user.coverPictureUrl
    // }
  },
  setup(props){
    const router = useRouter();
    const isComplete = getCurrentInstance().appContext.config.globalProperties.$isComplete
    return{
      props,
      router,
      ftpUrlImg:ftpUrlImg,
      Plus, Star,Close,
      tagsIndex:[
        'color1','color2','color3','color4','color5','color6'
      ],
      srcList:ref("https://yqwzh.ink/SchoolCupid/defaultImg/default_headImg.png"),
      isComplete,
      showTags:ref(true),
      noShowTags:ref(true),
    }
  }
};
</script>

<style lang="less" scoped>
@import "./src/assets/style/base";
.home-list-item {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .home-list-box {
    width: 230px;
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 14px 20px;
    box-shadow: 1px 1px 8px #f0c9cf;
    .home-list-info{
      display: flex;
      flex-direction: column;
      .list-img{
        width: 200px;
        height: 200px;
        border: 1px dot-dash #e8e5e5;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .list-item{
        position: relative;
        padding: 10px 0;
        .item-title{
          border-bottom: 1px solid #e8e5e5;
          padding: 3px 0;
          h5{
            font-weight: @tit-weight;
            font-size: @title + 4px;
          }
          span{
            font-size: @title;
          }
          .item-gender{
            padding-left: 10px;
            position: relative;
            top: 4px;
          }
        }
        .item-tag{
          //paddin: 10px 0;
          font-size: @title;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          //white-space: nowrap;
          .item-tags{
            .mx-1{
              color: #fff !important;
            }
          }
        }
      }
    }
    .home-list-info:hover .list-img .lazy-img{
      transform: scale(1.3);
      transition: all 0.4s ease 0s;
      -webkit-transform: scale(1.1);
    }
    .home-list-info .list-item{
      transform:translateY(10px);
      transition: all 0.4s ease 0s;
      -webkit-transform: translateY(10px);
    }
    .home-list-info:hover .list-img .lazy-img{
      transition: all 0.4s ease 0s;
    }
    .home-list-info .list-item{
      transition: all 0.4s ease 0s;
    }
  }

}

.color1{
  background: #f1939c;
  color: #fff;
}
.color2{
  background: #d276a3;
  color: #fff;
}
.color3{
  background: #f0c9cf;
  color: #fff;
}
.color4{
  background: #e16c96;
  color: #fff;
}
.color5{
  background: #d1c2d3;
  color: #fff;
}.color6{
   background: #ef82a0;
   color: #fff;
 }

</style>